<template>
	<view>
		<view class="header_fixed" :style="{'background':bg,'color':color}">
			<view class="headerPlace" :style="{'height':statusBarHeight+'px'}"></view>
			<view class="header_h flex-ac-jc" :style="{'height':navigationBarHeight+'px'}">
				<view class="head_left" aria-role="button" aria-label="返回" @tap="goBack" :style="{'width':customWidth+'px'}">
					<text class="gui-icons icon" v-if="pages>1">&#xe643;</text>
				</view>
				<text class="head_title flex-ac f32 gui-bold qoverDot flex1 gui-text-center">{{title}}</text>
				<text class="head_right" :style="{'width':customWidth+'px'}"></text>
			</view>
			<view class="headerPlace2"></view>
		</view>
		<view v-if="isShowPlace" :style="{'height':navHeight+'px'}"></view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const props = defineProps({
		title: String,
		isShowPlace: {
			type: Boolean,
			default: true
		},
		bg: {
			type: String,
			default: 'linear-gradient(180deg, #0034C7 0%, #4072FE 100%);'
		},
		color: {
			type: String,
			default: '#ffffff'
		}
	})
	const navHeight = ref(getApp().globalData.navHeight) //总体高度
	const statusBarHeight = ref(getApp().globalData.statusBarHeight) //胶囊高度
	const navigationBarHeight = ref(getApp().globalData.navigationBarHeight) //导航栏高度
	const customWidth = ref(getApp().globalData.customWidth) //胶囊宽度
	const pages = ref(getCurrentPages().length)
	onMounted(() => {
		setStateBarText()
	})

	const setStateBarText = () => {
		if(props.color=="#ffffff"){
			uni.setNavigationBarColor({
				frontColor: "#ffffff", // 导航栏文字设置
				backgroundColor: ""// 导航栏背景色设置,可以不传，但是必须要有，真2
			})
		}
	}

	const goBack = () => {
		uni.navigateBack()
	}
	const emit = defineEmits(['changeData'])
	const handleChange = () => {
		emit('changeData', '修改后的数据')
	}
</script>

<style lang="scss" scoped>
	.header_fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 2;
	}

	.headerPlace2 {
		height: 20rpx;
	}

	.header_h {
		padding: 0 20rpx;

		// .head_left {
		// 	width: 160rpx;
		// }

		.head_title {
			margin: 0 20rpx;
		}

		// .head_right {
		// 	width: 160rpx;
		// }
	}
</style>